//
//  Transition.swift
//  SwiftUIAnimation
//
//  Created by 李煜 on 2024/8/21.
//

import SwiftUI
// 转场 transition: 在视图层次中添加或者移除视图
// 系统内置转场类型: 默认fadeIn/fadeOut move slide opacity
struct Transition: View {
  // 是否显示紫色矩形
  @State private var showPurple: Bool = false
  var body: some View {
    VStack(spacing: 0) {
      RoundedRectangle(cornerRadius: 10)
        .frame(width: 300, height: 300)
        .foregroundColor(.green)
        .overlay {
          Text("Show details")
            .font(.system(.largeTitle, design: .rounded))
            .bold()
            .foregroundStyle(.white)
        }

      if showPurple {
        RoundedRectangle(cornerRadius: 10)
          .frame(width: 300, height: 300)
          .foregroundStyle(.purple)
          .overlay {
            Text("Well ,here is the details")
              .font(.system(.largeTitle, design: .monospaced))
              .bold()
              .foregroundStyle(.white)
          }
//          .transition(.scale(scale: 0, anchor: .bottom))
//          .transition(.move(edge: .trailing))
//          .transition(.slide)
//          .transition(.opacity)
//          .transition(.offset(x: 200, y: 200))
          .transition(.offset(x: -600, y: 0))
      }
    }
    .onTapGesture {
      withAnimation(.spring) {
        self.showPurple.toggle()
      }
    }
  }
}

#Preview {
  Transition()
}
